<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>书本列表</title>
		
	</head>
	<body>
		<div>
			<input type="text" name="search" placeholdewr="请输入书名" />
			<button type="button" onclick="search()" class="btn btn-info ">搜索</button>
			<button type="button" onclick="add()" class="btn btn-success">添加</button>
		</div>
		<table border="1">
			<thead>
				<th></th>
				<th>id</th>
				<th>名称</th>
				<th>价格</th>
				<th>出版日期</th>
				<th>数量</th>
				<th>操作</th>
			</thead>
			<tbody>

			</tbody>
		</table>
		<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let books = [{
					id: 1,
					name: 'Java从入门到放弃',
					price: 80,
					tdate: '2020-07-01',
					count: 1,
					account: "haha"
				},
				{
					id: 2,
					name: 'Vue从入门到放弃',
					price: 90,
					tdate: '2020-07-02',
					count: 1,
					account: "haha"
				},
				{
					id: 3,
					name: 'Mysql从入门到放弃',
					price: 100.01,
					tdate: '2020-07-03',
					count: 1,
					account: "haha"
				},
				{
					id: 4,
					name: '啥都从入门到放弃',
					price: 70.00,
					tdate: '2020-07-04',
					count: 1,
					account: "haha"
				},
			];

			let data00 = JSON.parse(localStorage.getItem("data00"));
			if (!data00) {
				data00 = books;
				localStorage.setItem("data00", JSON.stringify(data00));
			}
			sessionStorage.setItem("account", "haha");
			let $tbody = $("table").find("tbody");

			function add() {
				sessionStorage.removeItem("index");
				sessionStorage.removeItem("item");
				location.href = "add.html";
			}

			function del(index) {
				data00.splice(index, 1);
				localStorage.setItem("data00", JSON.stringify(data00));
				$tbody.empty();
				update();
			}

			function search() {
				let search = $("input[name='search']").val();
				$tbody.empty();
				update(search);
			}

			function Edit(index) {
				let item = data00[index];
				sessionStorage.setItem("index", index);
				sessionStorage.setItem("item", JSON.stringify(item));
				location.href = "add.html";
			}

			function update(bookName) {
				for (let index in data00) {
					let item = data00[index];
					console.log(item);
					if (sessionStorage.getItem("account") !== item.account) {
						continue;
					}
					if (bookName && item.name.toLowerCase().indexOf(bookName.toLowerCase()) === -1) {
						continue;
					}
					let tr =
						`
						<tr>
							<td></td>
							<td title="id">${item.id}</td>
							<td title="name">${item.name}</td>
							<td title="price">${item.price}</td>
							<td title="tdate">${item.tdate}</td>
							<td title="count">${item.count}</td>
							<td>
								<button type="button" onclick="Edit(${index})">编辑</button>
								<button type="button" onclick="del(${index})">删除</button>
							</td>
						</tr>
					`;
					console.log(tr);
					$tbody.append(tr);
				}
			}
			update();
		</script>
	</body>
</html>
